<template>
  <div class="component ytc-listContainer" :class='[direction, flexWrap]'>
    <div class='slot' v-for="(v,i) in clist" :key='i'><slot :data="v" :i='i' name='ListContainer'></slot></div>
  </div>
</template>

<script>
  import {VueExtend} from 'godspen-lib'

  export default {
    mixins: [VueExtend.mixin],
    name: 'ListContainer',
    label: process.env.LABEL,
    style: process.env.STYLE,
    stack: null, // 是否是堆叠模式 ，false：孩子元素会按楼层一个个向下排布， true: 孩子元素绝对定位，随意放置位置
    childLimit: 9999,  // 孩子元素最大限制数
    leaf: false, // 是否是叶子节点，为true的时候该节点下面不能添加节点
    props: {
      list: {
        type: Array,
        editer: {
          label: '列表数据',
          desc: '数组形式列表数据'
        },
        default: function () {
          return []
        }
      },
      direction: {
        type: String,
        editer: {
          label: '布局',
          type: 'enum',
          defaultList: {
            'column': '垂直',
            'row': '水平',
          }
        },
        default: 'column'
      },
      flexWrap: {
        type: String,
        editer: {
          label: '换行',
          type: 'enum',
          defaultList: {
            'nowrap': '不换行',
            'wrap': '换行',
          }
        },
        default: 'wrap'
      }
    },
    data () {
      return {
        sList: null
      }
    },
    computed: {
      clist () {
        return this.sList || this.list
      }
    },
    mounted: function () {
      console.log('列表数据：', this.clist)
    },
    editorMethods: {
    },
    methods: {
      setList (val) {
        this.sList = val || null
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
.component {
  width: 100%;
  height: 100%;
  display flex;
  overflow: auto;
  align-content: flex-start;
  &.row {
   flex-direction row;
 }
&.column {
   flex-direction column;
 }
&.wrap {
   flex-wrap: wrap;
 }
&.nowrap {
   flex-wrap: nowrap;
 }
> .slot {
  flex: none;
  position: relative;
div {
  position relative !important
}
}
}
</style>
